<script lang="ts">
import { defineComponent, reactive, computed, watch, ref, nextTick } from "vue";
import { AppModule } from "@/store/modules/app";
import { UserModule } from "@/store/modules/user";
import AppLanguage from "./AppLanguage.vue";
import Clipboard from "clipboard";
import { showToast } from "vant";
import { useI18n } from "vue-i18n";
import { getAssetsFile } from "@/utils/pub-use";
export default defineComponent({
    components: {
        AppLanguage,
    },
    setup() {
        const { t } = useI18n();
        const setat = reactive({
            open: false,
            // bg: require("@/assets/image/header_bg.png"),
            menuList: [
                {
                    title: "website",
                    name: "/website",
                    // img: getAssetsFile("_img42.png"),
                },
                {
                    title: "index",
                    name: "/index",
                    // img: getAssetsFile("_img41.png"),
                },
                {
                    title: "stake",
                    name: "/stake",
                    // img: getAssetsFile("_img43.png"),
                },
                {
                    title: "node",
                    name: "/node",
                    // img: getAssetsFile("_img36.png"),
                },
                {
                    title: "Trade",
                    name: "/swap",
                    // img: getAssetsFile("_img36.png"),
                },
            ],
        });
        const pageLoading = ref(true);
        const userInfo = ref({});
        const isNode = ref(false);
        const isDao = ref(false);
        const loadData = async () => {
            pageLoading.value = true;
            pageLoading.value = false;
        };
        const userAddr = computed(() => {
            if (UserModule.userAddr) {
                var subStr1 = UserModule.userAddr.substr(0, 5);
                var subStr2 = UserModule.userAddr.substr(
                    UserModule.userAddr.length - 5,
                    5
                );
                var subStr = subStr1 + "..." + subStr2;
                return subStr;
            } else {
                return "";
            }
        });
        const SignOut = () => {
            UserModule.SET_USERADDR("");
            setat.open = false;
        };
        const copy = () => {
            const clipboard = new Clipboard(".copy");
            nextTick(() => {
                clipboard.on("success", () => {
                    showToast(t("layout.copySuccessfully"));
                    clipboard.destroy();
                });
                clipboard.on("error", () => {
                    showToast(t("layout.fail"));
                    clipboard.destroy();
                });
            });
        };
        watch(
            () => UserModule.userAddr,
            (newUserAddr: string) => {
                if (newUserAddr) {
                    loadData();
                }
            },
            { immediate: true }
        );
        return {
            setat,
            AppModule,
            userInfo,
            isNode,
            isDao,
            UserModule,
            userAddr,
            copy,
            SignOut,
        };
    },
});
</script>
<template>
    <van-popup
        v-model:show="setat.open"
        position="right"
        :duration="0.2"
        close-icon="cross"
        close-icon-position="top-right"
        closeable
        :style="{
            height: '100%',
            width: '100%',
            background: `rgba(255, 255, 255, 1)`,
            backdropFilter: 'blur(16px)',
        }"
    >
        <div class="menu-wrap">
            <div class="logo">
                <div class="logoimg"></div>
                <div class="address-right"></div>
            </div>
            <div class="menu">
                <template v-for="(item, i) in setat.menuList">
                    <div
                        class="row"
                        v-if="
                            item.title != 'dao' &&
                            item.title != 'leader' &&
                            item.title != 'workshop'
                        "
                    >
                        <router-link
                            :to="item.name"
                            class="title"
                            @click="setat.open = false"
                        >
                            <!-- <img :src="item.img" alt="" srcset="" /> -->
                            {{ $t("menu." + item.title) }}</router-link
                        >
                    </div>
                </template>
                <div class="row">
                    <a
                        class="title"
                        href="https://t.me/TronBankPro1"
                        target="_blank"
                        rel="noopener noreferrer"
                        @click="setat.open = false"
                    >
                        <!-- <img src="@/assets/image/_img37.png" alt="" srcset="" /> -->
                        {{ $t("menu.service") }}</a
                    >
                </div>
                <app-language-2></app-language-2>
            </div>
            <!-- <div class="SignOut" @click="SignOut">
                {{$t("layout.SignOut")}}
                <svg viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.4979 24.2019C9.29216 24.2019 6.2757 22.955 4.01233 20.6875C1.74484 18.42 0.497925 15.4077 0.497925 12.2019C0.497925 8.99614 1.74484 5.97968 4.01233 3.71631C6.27982 1.44882 9.29216 0.201904 12.4979 0.201904C13.0658 0.201904 13.5267 0.66281 13.5267 1.23071C13.5267 1.79861 13.0658 2.25952 12.4979 2.25952C7.01233 2.25952 2.55142 6.72042 2.55142 12.206C2.55142 17.6916 7.01233 22.1525 12.4979 22.1525C13.0658 22.1525 13.5267 22.6134 13.5267 23.1813C13.5267 23.741 13.0658 24.2019 12.4979 24.2019Z" fill="#85A0E1" />
                    <path d="M19.358 17.3418C19.0946 17.3418 18.8312 17.2431 18.6296 17.0414C18.2263 16.6381 18.2263 15.9879 18.6296 15.5846L20.9876 13.2266H9.75305C9.18515 13.2266 8.72424 12.7657 8.72424 12.1978C8.72424 11.6299 9.18515 11.169 9.75305 11.169H20.9876L18.6296 8.81096C18.2263 8.40766 18.2263 7.75746 18.6296 7.35417C19.0329 6.95087 19.6831 6.95087 20.0864 7.35417L24.2016 11.4694C24.4033 11.671 24.502 11.9344 24.502 12.1978C24.502 12.4612 24.4033 12.7245 24.2016 12.9262L20.0864 17.0414C19.8847 17.2431 19.6214 17.3418 19.358 17.3418Z" fill="#85A0E1" />
                </svg>
            </div> -->
            <!-- <div class="language" @click="$refs.language.setat.open = true">
                {{ $t("layout.languages") }}
                <svg
                    viewBox="0 0 35 35"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                        fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M2.43204 10.3516C3.68274 7.72502 5.6074 5.46369 7.99362 3.80235L8.10355 3.72586L8.23138 3.76578C8.6982 3.91159 9.15751 4.06991 9.61784 4.23473C9.99512 4.36981 10.4098 4.5256 10.8085 4.57728C11.1292 4.61891 11.4467 4.59163 11.7654 4.54617C12.331 4.46551 12.9046 4.33747 13.4639 4.21969C13.9165 4.1244 14.4338 4.03703 14.8976 4.07244C15.2172 4.09685 15.4905 4.17922 15.7608 4.35237C15.8949 4.4383 16.0178 4.53906 16.1408 4.63996C16.375 4.83198 16.5966 5.005 16.8661 5.14739C17.241 5.34536 17.6472 5.45604 18.0656 5.51565C18.4884 5.57594 18.9602 5.59193 19.2683 5.93756C19.43 6.11905 19.5027 6.36036 19.509 6.6001C19.5194 6.98763 19.3989 7.31992 19.3364 7.69269C19.2756 8.05499 19.2666 8.39617 18.9872 8.67761C18.6501 9.01729 18.1155 9.01988 17.677 9.11073C16.715 9.31 15.8516 9.64305 14.979 10.0894C14.5354 10.3163 14.1047 10.5423 13.7397 10.8888C13.287 11.3186 13.037 11.8432 12.9182 12.4522C12.9024 12.5329 12.8747 12.6101 12.8346 12.6818C12.6836 12.9518 12.3921 13.09 12.1085 13.1777C11.7591 13.2859 11.3683 13.341 11.0064 13.3938C10.956 13.4012 10.9055 13.4085 10.855 13.416C10.382 13.4863 9.70322 13.585 9.34126 13.9234C9.25342 14.0055 9.18444 14.1005 9.13386 14.2096C8.82686 14.8717 9.3818 15.6595 9.69481 16.2205C10.023 16.8086 10.3889 17.506 10.9767 17.8721C11.0689 17.9296 11.1658 17.9739 11.2701 18.0042C11.655 18.1156 12.2068 18.0301 12.6004 17.9843C12.9748 17.9406 13.3481 17.9 13.724 17.87L13.7348 17.8691H13.7457C13.904 17.8691 14.1067 17.9143 14.2615 17.9486C14.5347 18.009 14.8069 18.0827 15.0754 18.1612C15.7996 18.3732 16.5229 18.6305 17.2151 18.9305C18.0191 19.2788 19.0214 19.7871 19.6252 20.4319C19.8646 20.6875 20.0919 21.0234 20.064 21.3903C19.9731 22.5879 19.5764 23.5003 18.856 24.4463C18.648 24.7194 18.4262 24.9812 18.2043 25.2429C17.3081 26.3002 16.6128 27.1851 16.4355 28.6154C16.3462 29.3363 16.1688 30.1234 15.8438 30.7779C15.6929 31.0818 15.3742 31.6235 14.9833 31.6338L14.9797 31.6338H14.9761C14.9752 31.6338 14.9743 31.6338 14.9735 31.6338C14.6007 31.6338 14.2832 31.0994 14.1379 30.8168C13.9591 30.4691 13.8222 30.0889 13.7083 29.7155C13.5326 29.1393 13.4031 28.5435 13.2974 27.9509C13.1046 26.8691 12.7908 25.5818 12.1794 24.6503C11.8208 24.1039 11.4503 23.8072 10.9208 23.448C10.7908 23.3598 10.6608 23.2715 10.5392 23.1718C10.1941 22.8887 9.99238 22.5658 9.85437 22.1422C9.63794 21.478 9.60185 20.6439 9.59398 19.9504C9.57648 18.4017 8.75768 17.3221 7.45058 16.5651C7.06544 16.3421 6.68823 16.1169 6.32203 15.863C5.83832 15.5277 5.38578 15.155 4.96879 14.7393C3.7885 13.5627 2.97222 12.1254 2.42083 10.5597L2.3833 10.4533L2.43204 10.3516ZM28.8923 5.32882C32.2682 8.49058 34.1796 12.8706 34.1796 17.4998C34.1796 20.9572 33.1166 24.3005 31.118 27.1214L31.0994 27.1477L31.0752 27.169C30.715 27.485 30.2479 27.6881 29.7777 27.7701C29.4274 27.8312 28.953 27.8402 28.6358 27.6559C28.4087 27.524 28.3465 27.3411 28.4094 27.0878C28.5606 26.4787 28.6777 25.8548 28.7101 25.227C28.7324 24.7952 28.7078 24.3839 28.6747 23.9542C28.6471 23.5979 28.624 23.2495 28.6317 22.8914C28.6528 21.8973 28.6339 20.2829 27.8906 19.511C27.3369 18.936 26.5258 18.9355 25.7834 18.923C25.1138 18.9116 24.485 18.8908 23.8436 18.6683L23.8106 18.6568L23.7816 18.6374C23.1129 18.1913 22.3235 17.5448 22.3522 16.6571C22.3713 16.0647 22.7536 15.4924 23.0619 15.0067C23.4139 14.4525 23.8909 13.7409 23.6618 13.0575L23.6254 12.9491L23.677 12.8471C23.8032 12.5977 24.1702 12.1786 24.4421 12.1026L24.52 12.0807L24.5974 12.1049C24.9211 12.2061 25.277 12.2676 25.6124 12.3164C26.0402 12.3785 26.4727 12.4204 26.9039 12.451C27.4916 12.4927 28.0862 12.5148 28.6753 12.5093C28.8979 12.5072 29.1221 12.5014 29.3441 12.485C29.4604 12.4764 29.6111 12.4657 29.7236 12.435C30.1574 12.3162 30.4782 11.6936 30.5896 11.2966C30.6563 11.0589 30.6886 10.8004 30.6604 10.5542C30.5683 9.75017 29.906 9.40858 29.1539 9.37891C29.0543 9.37494 28.9438 9.38513 28.8445 9.39292C28.6276 9.41001 28.4107 9.43161 28.1942 9.45233C27.7556 9.4943 27.317 9.53497 26.8776 9.56696C26.5922 9.58775 26.3057 9.60559 26.0198 9.61413C25.8033 9.62056 25.5658 9.62575 25.3508 9.59998L25.1706 9.57838L25.1204 9.40393C24.9007 8.63878 24.7875 7.29784 25.4326 6.70817C26.0516 6.14236 27.0868 5.79763 27.8771 5.53383C28.1178 5.45351 28.3662 5.37339 28.6004 5.27598L28.7635 5.20817L28.8923 5.32882Z"
                        fill="#001133"
                    />
                    <path
                        fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M17.4999 33.9062C8.4534 33.9062 1.09376 26.5463 1.09376 17.4998C1.09376 15.5373 1.44014 13.6549 2.07513 11.9089C3.58608 15.2746 5.87455 16.6004 7.03946 17.275C8.04373 17.8568 8.76095 18.7718 8.77387 19.9599C8.8058 22.7944 9.46211 23.4501 10.4602 24.127C11.1649 24.6052 11.9641 25.1474 12.4898 28.0951C13.0058 30.9883 13.8398 32.4547 14.9698 32.4547C14.9815 32.4547 14.9931 32.4544 15.0053 32.454C16.0915 32.4253 16.9729 30.9579 17.2496 28.7165C17.4064 27.4533 18.0659 26.6748 18.8295 25.7737C19.7174 24.7265 20.723 23.5397 20.8816 21.4527C20.9255 20.8796 20.673 20.3156 20.1325 19.7773C18.4738 18.1248 14.3438 16.9976 13.6649 17.0518C13.196 17.0892 12.8125 17.1337 12.5049 17.1699C11.8431 17.247 11.5683 17.2744 11.4103 17.176C11.1916 17.0399 10.9004 16.5717 10.4176 15.7961L10.2387 15.5075C9.78361 14.7779 9.87364 14.5635 9.87781 14.5548C9.96134 14.3755 10.6892 14.2694 11.1246 14.2056C12.1179 14.0604 13.4789 13.8618 13.7237 12.6098C13.9308 11.5471 14.59 11.2101 15.3526 10.8199C15.877 10.5515 16.4389 10.2981 17.0113 10.1175C17.6183 9.92619 18.2507 9.84819 18.8644 9.68304C19.5356 9.50209 19.8855 8.94414 20.0293 8.29821C20.218 7.44871 20.5092 6.1384 19.8994 5.39376C19.5178 4.92775 18.8957 4.80553 18.1814 4.70395C17.3712 4.58849 17.0261 4.30534 16.6604 4.00572C15.9235 3.40136 15.2508 3.00528 13.2944 3.41715C11.0743 3.88445 11.0743 3.88445 9.89421 3.46261C9.73617 3.40587 9.55365 3.341 9.34399 3.26847C11.748 1.88521 14.5331 1.09382 17.4998 1.09382C21.3799 1.09382 24.9481 2.44836 27.7597 4.70812C27.7113 4.72425 27.6635 4.74038 27.6168 4.75583C26.776 5.03672 25.6237 5.42151 24.8784 6.10292C24.7665 6.20546 24.6659 6.32126 24.5797 6.44636C23.9412 7.37263 23.9495 8.9909 24.4552 9.98136C24.7171 10.4935 25.3947 10.5444 28.2717 10.269C28.6281 10.2348 29.0319 10.1961 29.1222 10.1987C29.7395 10.2229 29.8072 10.477 29.8291 10.5605C29.9342 10.9559 29.6398 11.5257 29.4818 11.6486C28.9752 11.7402 25.9639 11.6864 24.819 11.3148C24.3543 11.1639 23.8079 11.3922 23.3219 11.9415C23.0587 12.2389 22.6492 12.8068 22.8653 13.2715C22.994 13.5485 22.7633 13.9459 22.3689 14.567C21.9752 15.1878 21.5288 15.8912 21.5323 16.7204C21.5372 17.6812 22.1435 18.5448 23.3867 19.3601C23.4216 19.383 23.4593 19.4017 23.499 19.4162C24.322 19.7184 25.0908 19.7316 25.7691 19.7429C26.5518 19.7564 27.0091 19.7787 27.2991 20.0799C27.6696 20.465 27.8418 21.405 27.8109 22.8741C27.8015 23.3117 27.8296 23.6703 27.8563 24.0177C27.9134 24.7591 27.9682 25.4599 27.6128 26.8899C27.4603 27.503 27.6886 28.0548 28.2233 28.365C28.5323 28.5443 28.9199 28.6288 29.3334 28.6288C29.4049 28.6288 29.4775 28.6256 29.5501 28.6208C26.5507 31.8683 22.2592 33.9062 17.4999 33.9062ZM8.14989 4.02678C5.81111 5.6551 3.91414 7.87521 2.67888 10.4692C4.01244 14.2557 6.33057 15.6009 7.5877 16.3287C8.9851 17.1382 9.8491 18.307 9.86749 19.9475C9.89551 22.4221 10.39 22.7575 11.0743 23.222C11.9144 23.7918 12.9603 24.501 13.5666 27.9031C14.071 30.7302 14.7654 31.3607 14.9734 31.3607H14.976C15.2801 31.3526 15.937 30.4171 16.1641 28.582C16.3611 26.995 17.1916 26.0145 17.9956 25.0664C18.8511 24.0566 19.6594 23.1029 19.7913 21.3698C19.8078 21.1486 19.6852 20.8958 19.4256 20.619C18.1117 19.2155 14.2787 18.1429 13.7456 18.1429C13.2993 18.1783 12.9293 18.2215 12.632 18.2561C11.8144 18.3515 11.321 18.4092 10.8321 18.1045C10.1923 17.7062 9.81232 16.9922 9.45596 16.354C9.08607 15.6905 8.52231 14.8779 8.88578 14.0948C9.21766 13.3785 10.1068 13.2489 10.9669 13.1234C11.9261 12.9834 12.561 12.8574 12.6497 12.4C12.9593 10.8153 14.0101 10.278 14.8544 9.84614C15.761 9.38239 16.6201 9.05051 17.6215 8.84317C17.9717 8.77058 18.5287 8.75157 18.7932 8.48518C19.0122 8.26458 19.0183 7.93502 19.0667 7.64764C19.1247 7.30064 19.245 6.96391 19.2357 6.60755C19.2308 6.4318 19.1808 6.25119 19.0641 6.1196C18.8219 5.84835 18.3626 5.83447 18.0269 5.78642C16.9149 5.6281 16.3892 5.1975 15.9673 4.85146C15.4533 4.42996 15.1143 4.1516 13.5202 4.48738C11.0911 4.99857 10.9415 4.99885 9.52562 4.49224C9.17323 4.36577 8.74366 4.21224 8.14989 4.02678ZM33.9061 17.4998C33.9061 12.7822 31.904 8.52414 28.7054 5.52843C28.5154 5.60745 28.2749 5.68935 27.9636 5.79318C27.2151 6.04311 26.1905 6.38531 25.6171 6.91004C25.0604 7.41829 25.2007 8.69285 25.3832 9.32853C25.9321 9.39429 27.4721 9.2469 28.168 9.18019C28.7354 9.12598 29.0149 9.09952 29.1646 9.10567C30.1744 9.14532 30.8349 9.67524 30.9319 10.5231C31.0345 11.4181 30.4614 12.5162 29.7957 12.6987C29.1662 12.871 25.8731 12.7903 24.5157 12.3659C24.3496 12.4124 24.0281 12.759 23.921 12.9706C24.1829 13.7516 23.7117 14.4938 23.2928 15.1533C22.5613 16.3056 22.0308 17.1409 23.9333 18.4099C24.5635 18.6286 25.1856 18.6392 25.788 18.6495C26.6137 18.6634 27.468 18.6782 28.0875 19.3213C28.6919 19.9492 28.9441 21.0519 28.905 22.8972C28.8967 23.2807 28.9215 23.5977 28.9473 23.9331C29.0089 24.7287 29.0724 25.5518 28.6747 27.1536C28.6357 27.3104 28.6712 27.3604 28.7731 27.4194C29.173 27.6519 30.2195 27.5558 30.8949 26.9633C32.7906 24.2875 33.9061 21.0215 33.9061 17.4998ZM17.4999 0C7.85027 0 -0.00012207 7.85039 -0.00012207 17.4998C-0.00012207 27.1495 7.85034 34.9999 17.4999 34.9999C27.1496 34.9999 35 27.1495 35 17.4998C35.0001 7.85039 27.1496 0 17.4999 0Z"
                        fill="#85A0E1"
                    />
                </svg>
            </div> -->
        </div>
    </van-popup>
</template>

<style lang="less" scoped>
.van-popup {
    &::after,
    &::before {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        content: "";
        background-size: 100%;
        background-repeat: no-repeat;
        z-index: -1;
    }
    &::after {
        background-image: url("@/assets/image/img1.png");
        background-position: right top;
    }
    &::before {
        background-image: url("@/assets/image/img2.png");
        background-position: left top;
    }
    &:deep(> .van-icon) {
        color: #000;
        // font-size: 23px;
        top: 28px;
        // right: 20px;
        // width: 14px;
        // height: 12px;
        // background: url("@/assets/image/_img32.png") no-repeat;
        // background-position: top;
        // background-size: cover;
        // &::before {
        //     display: none;
        // }
    }
}
.menu-wrap {
    padding: 15px;
    .address-right {
        margin-left: 15px;
    }
    .logo {
        display: flex;
        align-items: center;
        .logoimg {
            width: 158px;
            height: 28.727px;
            flex-shrink: 0;
            background: url("@/assets/logo2.png") no-repeat;
            background-position: center;
            background-size: contain;
        }
        img {
            display: inline-block;
            height: 64px;
        }
        .name {
            font-size: 16px;
            font-weight: 700;
            line-height: 24px;
            color: #fff;
        }
        .address {
            display: flex;
            align-items: center;
            margin-top: 2.5px;
            font-size: 10px;
            font-weight: 400;
            line-height: 15px;
            color: rgba(133, 160, 225, 1);
            svg {
                margin-left: 8px;
                width: 10.1px;
                height: 12px;
            }
        }
    }

    .menu {
        padding-top: 50px;
        .row {
            position: relative;
            .title {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 20px 0;
                position: relative;
                text-align: center;
                font-weight: 400;
                font-size: 16px;
                word-wrap: break-word; /* 允许在长单词中间换行 */
                word-break: break-all; /* 允许任意位置的单词断开 */
                border-bottom: 1px solid #d9d9d9;
                img {
                    width: 16px;
                    height: 16px;
                    margin-right: 9px;
                }
                &.router-link-active {
                    color: #eb0029;
                    font-weight: 700;
                    // &::before {
                    //     background-image: url("@/assets/image/image7.png");
                    // }
                }
                &::after {
                    // display: block;
                    // content: "";
                    // position: absolute;
                    // right: 0;
                    // background: url("@/assets/image/_img38.png") no-repeat;
                    // background-position: center;
                    // background-size: contain;
                    // width: 10px;
                    // height: 10px;
                }
                // &::after {
                //     position: absolute;
                //     left: 0;
                //     right: 0;
                //     bottom: 0;
                //     content: "";
                //     height: 1px;
                //     background-image: linear-gradient(
                //         to right,
                //         rgba(255, 255, 255, 1),
                //         rgba(255, 255, 255, 0)
                //     );
                //     opacity: 0.2;
                // }
            }
        }
    }
    .SignOut {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 100px 20px auto 20px;
        height: 44px;
        line-height: 44px;
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        color: rgba(133, 160, 225, 1);
        border: 1.6px solid var(--Semantic-Color, rgba(133, 160, 225, 1));
        svg {
            margin-left: 10px;
            width: 24px;
            height: 24px;
        }
    }
    .language {
        display: flex;
        align-items: center;
        position: absolute;
        bottom: 28px;
        right: 20px;
        font-family: Source Han Sans CN;
        font-size: 12px;
        font-weight: 700;
        line-height: 18px;
        color: rgba(133, 160, 225, 1);
        svg {
            margin-left: 10px;
            width: 20px;
            height: 20px;
        }
    }
}
</style>
